<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">{{posmerchantInfo.name}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="主体类型">
            <el-radio-group v-model="ruleForm.subject_info.subject_type">
                <el-radio label="SUBJECT_TYPE_ENTERPRISE">企业</el-radio>
                <el-radio label="SUBJECT_TYPE_INDIVIDUAL">个体工商户</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="营业执照照片" prop="subject_info.business_license_info.license_copy" ref="license_copy">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/license_copy'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.subject_info.business_license_info.license_copy" :src="ruleForm.subject_info.business_license_info.license_copy" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img src="photo_zhizhao">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="注册号" prop="subject_info.business_license_info.license_number" ref="subject_info.business_license_info.license_number">
            <el-input v-model="ruleForm.subject_info.business_license_info.license_number"></el-input>
        </el-form-item>
        <el-form-item label="商户执照名称" prop="subject_info.business_license_info.merchant_name" ref="subject_info.business_license_info.merchant_name">
            <el-input v-model="ruleForm.subject_info.business_license_info.merchant_name"></el-input>
        </el-form-item>
        <el-form-item label="经营者姓名" prop="subject_info.business_license_info.legal_person" ref="subject_info.business_license_info.legal_person">
            <el-input v-model="ruleForm.subject_info.business_license_info.legal_person"></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="subject_info.identity_info.id_doc_type" ref="subject_info.identity_info.id_doc_type">
            <el-select v-model="ruleForm.subject_info.identity_info.id_doc_type" filterable>
                <el-option value="IDENTIFICATION_TYPE_IDCARD" label="中国大陆居民-身份证"></el-option>
                <el-option value="IDENTIFICATION_TYPE_HONGKONG_PASSPORT" label="中国香港居民-来往内地通行证"></el-option>
                <el-option value="IDENTIFICATION_TYPE_MACAO_PASSPORT" label="中国澳门居民-来往内地通行证"></el-option>
                <el-option value="IDENTIFICATION_TYPE_TAIWAN_PASSPORT" label="中国台湾居民-来往大陆通行证"></el-option>
                <el-option value="IDENTIFICATION_TYPE_OVERSEA_PASSPORT" label="其他国家或地区居民-护照"></el-option>
            </el-select>                
        </el-form-item>
        <div v-if="ruleForm.subject_info.identity_info.id_doc_type=='IDENTIFICATION_TYPE_IDCARD'">
            <el-form-item label="身份证人像面照片" prop="subject_info.identity_info.id_card_info.id_card_copy" ref="subject_info.identity_info.id_card_info.id_card_copy">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/id_card_copy'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.subject_info.identity_info.id_card_info.id_card_copy" :src="ruleForm.subject_info.identity_info.id_card_info.id_card_copy" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_shenfenA">
                    </i>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证国徽面照片" prop="subject_info.identity_info.id_card_info.id_card_national" ref="subject_info.identity_info.id_card_info.id_card_national">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/id_card_national'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.subject_info.identity_info.id_card_info.id_card_national" :src="ruleForm.subject_info.identity_info.id_card_info.id_card_national" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_shenfenB">
                    </i>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证姓名" prop="subject_info.identity_info.id_card_info.id_card_name" ref="subject_info.identity_info.id_card_info.id_card_name">
                <el-input v-model="ruleForm.subject_info.identity_info.id_card_info.id_card_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="subject_info.identity_info.id_card_info.id_card_number" ref="subject_info.identity_info.id_card_info.id_card_number">
                <el-input v-model="ruleForm.subject_info.identity_info.id_card_info.id_card_number"></el-input>
            </el-form-item>
            <el-form-item label="证件有效期类型">
                <el-radio-group v-model="ruleForm.subject_info.identity_info.id_card_info.card_period_type">
                    <el-radio label="0">定期</el-radio>
                    <el-radio label="1">长期</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证有效期开始时间" prop="subject_info.identity_info.id_card_info.card_period_begin" ref="subject_info.identity_info.id_card_info.card_period_begin">
                <el-date-picker
                    v-model="ruleForm.subject_info.identity_info.id_card_info.card_period_begin"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="身份证有效期结束时间" prop="subject_info.identity_info.id_card_info.card_period_end" ref="subject_info.identity_info.id_card_info.card_period_end" v-if="ruleForm.subject_info.identity_info.id_card_info.card_period_type==0">
                <el-date-picker
                    v-model="ruleForm.subject_info.identity_info.id_card_info.card_period_end"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </div>
        <div v-else>
            <el-form-item label="证件照片" prop="subject_info.identity_info.id_doc_info.id_doc_copy" ref="subject_info.identity_info.id_doc_info.id_doc_copy">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/id_doc_copy'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.subject_info.identity_info.id_doc_info.id_doc_copy" :src="ruleForm.subject_info.identity_info.id_doc_info.id_doc_copy" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_shenfenA">
                    </i>
                </el-upload>
            </el-form-item>
            <el-form-item label="证件姓名" prop="subject_info.identity_info.id_doc_info.id_doc_name" ref="subject_info.identity_info.id_doc_info.id_doc_name">
                <el-input v-model="ruleForm.subject_info.identity_info.id_doc_info.id_doc_name"></el-input>
            </el-form-item>
            <el-form-item label="证件号码" prop="subject_info.identity_info.id_doc_info.id_doc_number" ref="subject_info.identity_info.id_doc_info.id_doc_number">
                <el-input v-model="ruleForm.subject_info.identity_info.id_doc_info.id_doc_number"></el-input>
            </el-form-item>
            <el-form-item label="有效期类型">
                <el-radio-group v-model="ruleForm.subject_info.identity_info.id_doc_info.doc_period_type">
                    <el-radio label="0">定期</el-radio>
                    <el-radio label="1">长期</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="证件有效期开始时间" prop="subject_info.identity_info.id_doc_info.doc_period_begin" ref="subject_info.identity_info.id_doc_info.doc_period_begin">
                <el-date-picker
                    v-model="ruleForm.subject_info.identity_info.id_doc_info.doc_period_begin"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="证件有效期结束时间" prop="subject_info.identity_info.id_doc_info.doc_period_end" ref="subject_info.identity_info.id_doc_info.doc_period_end" v-if="ruleForm.subject_info.identity_info.id_doc_info.doc_period_type==0">
                <el-date-picker
                    v-model="ruleForm.subject_info.identity_info.id_doc_info.doc_period_end"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </div>
        <el-form-item label="商户简称" prop="business_info.merchant_shortname" ref="business_info.merchant_shortname">
            <el-input v-model="ruleForm.business_info.merchant_shortname"></el-input>
        </el-form-item>
        <el-form-item label="客服电话" prop="business_info.service_phone" ref="business_info.service_phone">
            <el-input v-model="ruleForm.business_info.service_phone"></el-input>
        </el-form-item>
        <el-form-item label="经营场景" prop="business_info.sales_info.sales_scenes_type" ref="business_info.sales_info.sales_scenes_type">
            <el-checkbox-group v-model="ruleForm.business_info.sales_info.sales_scenes_type">
                <el-checkbox label ="SALES_SCENES_STORE">线下门店</el-checkbox>
                <el-checkbox label ="SALES_SCENES_MINI_PROGRAM">小程序</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <div v-if="ruleForm.business_info.sales_info.sales_scenes_type.indexOf('SALES_SCENES_STORE')!=-1">
            <el-form-item label="门店名称" prop="business_info.sales_info.biz_store_info.biz_store_name" ref="business_info.sales_info.biz_store_info.biz_store_name">
                <el-input v-model="ruleForm.business_info.sales_info.biz_store_info.biz_store_name"></el-input>
            </el-form-item>
            <el-form-item label="门店省市区" prop="business_info.sales_info.biz_store_info.biz_address_area" ref="business_info.sales_info.biz_store_info.biz_address_area">
                <el-cascader v-model="ruleForm.business_info.sales_info.biz_store_info.biz_address_area" :options="areaList" :props="{value:'name',label:'name',children:'sub'}" filterable></el-cascader>
            </el-form-item>
            <el-form-item label="门店街道名称" prop="business_info.sales_info.biz_store_info.biz_store_address" ref="business_info.sales_info.biz_store_info.biz_store_address">
                <el-input v-model="ruleForm.business_info.sales_info.biz_store_info.biz_store_address"></el-input>
            </el-form-item>
            <el-form-item label="门店门头照片" prop="business_info.sales_info.biz_store_info.store_entrance_pic[0]" ref="business_info.sales_info.biz_store_info.store_entrance_pic[0]">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/store_entrance_pic'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.business_info.sales_info.biz_store_info.store_entrance_pic[0]" :src="ruleForm.business_info.sales_info.biz_store_info.store_entrance_pic[0]" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_mentou">
                    </i>
                </el-upload>
            </el-form-item>
            <el-form-item label="门店环境照片" prop="business_info.sales_info.biz_store_info.indoor_pic[0]" ref="business_info.sales_info.biz_store_info.indoor_pic[0]">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/indoor_pic'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.business_info.sales_info.biz_store_info.indoor_pic[0]" :src="ruleForm.business_info.sales_info.biz_store_info.indoor_pic[0]" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_mennei">
                    </i>
                </el-upload>
            </el-form-item>
            <el-form-item label="线下场所对应的商家APPID">
                <el-input v-model="ruleForm.business_info.sales_info.biz_store_info.biz_sub_appid"></el-input>
            </el-form-item>
        </div>
        <div v-if="ruleForm.business_info.sales_info.sales_scenes_type.indexOf('SALES_SCENES_MINI_PROGRAM')!=-1">
            <el-form-item label="服务商小程序APPID">
                <el-input v-model="ruleForm.business_info.sales_info.mini_program_info.mini_program_appid"></el-input>
            </el-form-item>
            <el-form-item label="商家小程序APPID">
                <el-input v-model="ruleForm.business_info.sales_info.mini_program_info.mini_program_sub_appid"></el-input>
            </el-form-item>
            <el-form-item label="小程序截图">
                <el-upload
                    class="avatar-uploader"
                    :action="domain+'/merchantimg/upload/mini_program_pics'"
                    :show-file-list="false"
                    name="imgs"
                    :headers="headers"
                    :on-success="getAddImage"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.business_info.sales_info.mini_program_info.mini_program_pics[0]" :src="ruleForm.business_info.sales_info.mini_program_info.mini_program_pics[0]" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <img src="photo_mennei">
                    </i>
                </el-upload>
            </el-form-item>
        </div>
        <el-form-item label="优惠费率活动（选填）">
            <el-select v-model="ruleForm.settlement_info.activities_id" placeholder>
                <el-option value="" label="不参与此次活动"></el-option>
                <el-option value="20191030111cff5b5e" label="泛行业活动-0.2%~0.6%"></el-option>
            </el-select>                
        </el-form-item>
        <el-form-item v-if="ruleForm.settlement_info.activities_id=='20191030111cff5b5e'" label="优惠费率活动值" prop="settlement_info.activities_rate" ref="settlement_info.activities_rate">
            <el-input v-model="ruleForm.settlement_info.activities_rate">
                <template slot="append">%</template>
            </el-input>
        </el-form-item>
        <el-form-item label="结算类型" prop="bank_account_info.bank_account_type" ref="bank_account_info.bank_account_type">
            <el-radio-group v-model="ruleForm.bank_account_info.bank_account_type" :disabled="ruleForm.subject_info.subject_type=='SUBJECT_TYPE_ENTERPRISE'">
                <el-radio label="BANK_ACCOUNT_TYPE_CORPORATE">对公银行账户</el-radio>
                <el-radio label="BANK_ACCOUNT_TYPE_PERSONAL">经营者个人银行卡</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="开户名称" prop="bank_account_info.account_name" ref="bank_account_info.account_name">
            <el-input v-model="ruleForm.bank_account_info.account_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bank_account_info.account_bank" ref="bank_account_info.account_bank">
            <el-select v-model="ruleForm.bank_account_info.account_bank" filterable @change="getSubBankList" placeholder="请选择" >
                <el-option
                    v-for="(item,index) in bankLists"
                    :key="index"
                    :label="item.bankname"
                    :value="item.bankname">
                </el-option>
            </el-select>                
        </el-form-item>
        <el-form-item label="开户行省市区" prop="bank_account_info.bank_address_area" ref="ruleForm.bank_account_info.bank_address_area">
            <el-cascader v-model="ruleForm.bank_account_info.bank_address_area" :options="areaList" :props="{value:'name',label:'name',children:'sub'}" filterable></el-cascader>
        </el-form-item>
        <el-form-item label="开户支行" prop="bank_account_info.bank_name" ref="bank_account_info.bank_name">
            <el-select v-model="ruleForm.bank_account_info.bank_name" filterable remote reserve-keyword :remote-method="getSubBankList" @change="getSubBranchName" placeholder="请选择">
                <el-option
                    v-for="item in subBankList"
                    :key="item.bankNo"
                    :label="item.subBranchName"
                    :value="item.subBranchName">
                </el-option>
            </el-select>                
        </el-form-item>
        <el-form-item label="银行账号" prop="bank_account_info.account_number" ref="bank_account_info.account_number">
            <el-input v-model="ruleForm.bank_account_info.account_number"></el-input>
        </el-form-item>
        <el-form-item label="超管姓名" prop="contact_info.contact_name" ref="contact_info.contact_name">
            <el-input v-model="ruleForm.contact_info.contact_name"></el-input>
        </el-form-item>
        <el-form-item label="超管身份证号" prop="contact_info.contact_id_number" ref="contact_info.contact_id_number">
            <el-input v-model="ruleForm.contact_info.contact_id_number"></el-input>
        </el-form-item>
        <el-form-item label="超管联系手机" prop="contact_info.mobile_phone" ref="contact_info.mobile_phone">
            <el-input v-model="ruleForm.contact_info.mobile_phone"></el-input>
        </el-form-item>
        <el-form-item label="超管邮箱" prop="contact_info.contact_email" ref="contact_info.contact_email">
            <el-input v-model="ruleForm.contact_info.contact_email"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getSelect">保存</el-button>
            <el-button type="primary" :loading="formLoading" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="history.go(-1);">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { merchantSelect, getPosmerchant, merchantInput, merchantaddWxaddpart, bankList, subBankList } from '@/api/api.verify.js'
import photo_cailiao from "@/assets/images/photo_cailiao.png"
import photo_card from "@/assets/images/photo_card.png"
import photo_mennei from "@/assets/images/photo_mennei.png"
import photo_mentou from "@/assets/images/photo_mentou.png"
import photo_shenfenA from "@/assets/images/photo_shenfenA.png"
import photo_shenfenB from "@/assets/images/photo_shenfenB.png"
import photo_shouchi from "@/assets/images/photo_shouchi.png"
import photo_shouyin from "@/assets/images/photo_shouyin.png"
import photo_zhengming from "@/assets/images/photo_zhengming.png"
import photo_zhizhao from "@/assets/images/photo_zhizhao.png"
import { rawCitiesData } from "@/utils/city-data.js"
import { domain } from "@/utils/config.js"
import { getToken } from '@/utils/auth'

export default {
  name: 'WxchatForm',
  data() {
    return {
      posmerchantInfo:{},//门店信息
      photo_cailiao:photo_cailiao,
      photo_card:photo_card,
      photo_mennei:photo_mennei,
      photo_mentou:photo_mentou,
      photo_shenfenA:photo_shenfenA,
      photo_shenfenB:photo_shenfenB,
      photo_shouchi:photo_shouchi,
      photo_shouyin:photo_shouyin,
      photo_zhengming:photo_zhengming,
      photo_zhizhao:photo_zhizhao,
      domain:domain,
      headers:{token:getToken()},
      formLoading:false,//确认按钮

      areaList:rawCitiesData,//省市区列表
      bankLists:[],//银行列表
      subBankList:[],//支行列表
      ruleForm: {
        business_code:'',//业务申请编号
        subject_info:{//主体资料
            subject_type:"SUBJECT_TYPE_ENTERPRISE",//企业类型
            business_license_info:{//营业执照
                license_copy:'',//营业执照照片
                license_number:'',//注册号
                merchant_name:'',//商户名称
                legal_person:'',//营业执照法人
            },
            identity_info:{//经营者/法人身份证件
                id_doc_type:'IDENTIFICATION_TYPE_IDCARD',//证件类型（选择）
                id_card_info:{//身份证信息(二选一)
                    id_card_copy:'',//身份证人像面照片
                    id_card_national:'',//身份证国徽面照片
                    id_card_name:'',//身份证姓名
                    id_card_number:'',//身份证号码
                    card_period_type:"0",//有效期类型
                    card_period_begin:'',//身份证有效期开始时间
                    card_period_end:'',//身份证有效期结束时间
                },
                id_doc_info:{//其他类型证件信息（二选一）
                    id_doc_copy:'',//证件照片
                    id_doc_name:'',//证件姓名
                    id_doc_number:'',//证件号码
                    doc_period_type:"0",//有效期类型
                    doc_period_begin:'',//证件有效期开始时间
                    doc_period_end:'',//证件有效期结束时间
                },
                owner:true,//是否为受益所有人
            },
        },
        business_info:{//+经营资料
            merchant_shortname:'',//商户简称
            service_phone:'',//客服电话
            sales_info:{//经营场景
                sales_scenes_type:["SALES_SCENES_STORE"],//经营场景
                biz_store_info:{//线下门店场景
                    biz_store_name:'',//门店名称
                    biz_address_area:[],//门店省市区名称
                    biz_address_code:'',//门店省市编码
                    biz_store_address:'',//门店街道名称
                    store_entrance_pic:[],//门店门头照片
                    indoor_pic:[],//店内环境照片
                    biz_sub_appid:'',//线下场所对应的商家APPID
                },
                mini_program_info:{//小程序场景
                    mini_program_appid:'',//服务商小程序APPID
                    mini_program_sub_appid:'',//商家小程序APPID
                    mini_program_pics:[],//小程序截图
                },
            },
        },
        settlement_info:{//结算规则
            settlement_id:'716',//入驻结算规则ID
            qualification_type:'零售批发/生活娱乐/网上商城/其他',//所属行业
            qualifications:[],//特殊资质图片
            activities_id:'20191030111cff5b5e',//优惠费率活动ID
            activities_rate:'',//优惠费率活动值    
            activities_additions:[],//优惠费率活动补充材料
        },
        bank_account_info:{//结算银行账户
            bank_account_type:'BANK_ACCOUNT_TYPE_CORPORATE',//账户类型
            account_name:'',//开户名称
            account_bank:'',//开户银行
            bank_address_area:[],//开户银行省市区全部编码
            bank_address_code:'',//开户银行省市区编码
            bank_branch_id:'',//开户银行联行号
            bank_name:'',//开户银行全称（含支行]
            account_number:'',//银行账号    
        },
        contact_info:{//超级管理员信息
            contact_name:'',//超级管理员姓名
            contact_id_number:'',//超级管理员身份证件号码
            openid:'',//超级管理员微信openid
            mobile_phone:'',//联系手机
            contact_email:'',//联系邮箱 
        },
        addition_info:{//补充材料
            legal_person_commitment:'',//法人开户承诺函
            legal_person_video:'',//法人开户意愿视频
            business_addition_pics:[],//补充材料
            business_addition_msg:'',//补充说明
        }
      },
      rules: {
          "subject_info.business_license_info.license_copy": [
              {required: true, message: '请添加营业执照照片', trigger: 'blur'},
          ],
          "subject_info.business_license_info.license_number": [
              {required: true, message: '请输入注册号', trigger: 'blur'},
          ],
          "subject_info.business_license_info.merchant_name": [
              {required: true, message: '请输入商户执照名称', trigger: 'blur'},
          ],
          "subject_info.business_license_info.legal_person": [
              {required: true, message: '请输入经营者姓名', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_type": [
              {required: true, message: '请选择证件类型', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.id_card_copy": [
              {required: true, message: '请添加身份证人像面照片', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.id_card_national": [
              {required: true, message: '请添加身份证国徽面照片', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.id_card_name": [
              {required: true, message: '请输入身份证姓名', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.id_card_number": [
              {required: true, message: '请输入身份证号码', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.card_period_begin": [
              {required: true, message: '请选择身份证有效期开始时间', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_card_info.card_period_end": [
              {required: true, message: '请选择身份证有效期结束时间', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_info.id_doc_copy": [
              {required: true, message: '请添加证件照片', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_info.id_doc_name": [
              {required: true, message: '请输入证件姓名', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_info.id_doc_number": [
              {required: true, message: '请输入证件号码', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_info.doc_period_begin": [
              {required: true, message: '证件有效期开始时间', trigger: 'blur'},
          ],
          "subject_info.identity_info.id_doc_info.doc_period_end": [
              {required: true, message: '证件有效期结束时间', trigger: 'blur'},
          ],
          "business_info.merchant_shortname": [
              {required: true, message: '请输入商户简称', trigger: 'blur'},
          ],
          "business_info.service_phone": [
              {required: true, message: '请输入客服电话', trigger: 'blur'},
          ],
          "business_info.sales_info.sales_scenes_type": [
              {required: true, message: '请选择经营场景', trigger: 'blur'},
          ],
          "business_info.sales_info.biz_store_info.biz_store_name": [
              {required: true, message: '请输入门店名称', trigger: 'blur'},
          ],
          "business_info.sales_info.biz_store_info.biz_address_area": [
              {required: true, message: '请选择门店省市区', trigger: 'blur'},
          ],
          "business_info.sales_info.biz_store_info.biz_store_address": [
              {required: true, message: '请输入门店街道名称', trigger: 'blur'},
          ],
          "business_info.sales_info.biz_store_info.store_entrance_pic.0": [
              {required: true, message: '请添加门店门头照片', trigger: 'blur'},
          ],
          "business_info.sales_info.biz_store_info.indoor_pic.0": [
              {required: true, message: '请添加门店环境照片', trigger: 'blur'},
          ],
          "settlement_info.activities_rate": [
              {required: true, message: '请输入优惠费率活动值', trigger: 'blur'},
          ],
          "bank_account_info.bank_account_type": [
              {required: true, message: '请选择结算类型', trigger: 'blur'},
          ],
          "bank_account_info.account_name": [
              {required: true, message: '请输入开户名称', trigger: 'blur'},
          ],
          "bank_account_info.account_bank": [
              {required: true, message: '请选择开户银行', trigger: 'blur'},
          ],
          "ruleForm.bank_account_info.bank_address_area": [
              {required: true, message: '请选择开户行省市区', trigger: 'blur'},
          ],
          "bank_account_info.bank_name": [
              {required: true, message: '请选择开户支行', trigger: 'blur'},
          ],
          "bank_account_info.account_number": [
              {required: true, message: '请输入银行账号', trigger: 'blur'},
          ],
          "contact_info.contact_name": [
              {required: true, message: '请输入超管姓名', trigger: 'blur'},
          ],
          "contact_info.contact_id_number": [
              {required: true, message: '请输入超管身份证号', trigger: 'blur'},
          ],
          "contact_info.mobile_phone": [
              {required: true, message: '请输入超管联系手机', trigger: 'blur'},
          ],
          "contact_info.contact_email": [
              {required: true, message: '请输入超管邮箱', trigger: 'blur'},
          ],
      },
    }
  },
  created() {
    this.posmerchantInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart() {//初始化
        let _this=this;
        bankList({}).then(d=>{//获取银行列表
          _this.bankLists=d.data
          _this.getMerchantSelect();//进件信息查询
        });
    },
    getMerchantSelect(){//进件信息查询
        let  _this=this;
        let data={};
        data.merchantId=this.posmerchantInfo.id
        data.channelId="301";
        merchantSelect(data).then(d=>{
          if(d.data&&d.data.inputInfo){
              _this.ruleForm=JSON.parse(d.data.inputInfo);
          }else{
              _this.getPosmerchant();
          }
        });
    },
    getPosmerchant(){//商户信息查询
        let data={};
        let _this=this;
        data.id=this.posmerchantInfo.id
        getPosmerchant(data,'GET').then(da=>{
          let d=da.data;
          switch(d.merchantType){//企业类型
              case "4"://企业
                  _this.ruleForm.subject_info.subject_type="SUBJECT_TYPE_ENTERPRISE";
                  break;
              case "5"://个体工商户
                  _this.ruleForm.subject_info.subject_type="SUBJECT_TYPE_INDIVIDUAL";
                  break;
              default:
                  _this.ruleForm.subject_info.subject_type="SUBJECT_TYPE_INDIVIDUAL";
          }
          _this.ruleForm.subject_info.business_license_info.legal_person=d.lawyer;//经营者姓名
          _this.ruleForm.subject_info.identity_info.id_card_info.id_card_name=d.lawyer;//法人姓名
          _this.ruleForm.subject_info.identity_info.id_card_info.id_card_number=d.idCardNo//法人身份证号
          _this.ruleForm.subject_info.identity_info.id_card_info.card_period_begin=d.lawyerCardBgn;//法人身份证有效期(起始)
          _this.ruleForm.subject_info.identity_info.id_card_info.card_period_end=d.lawyerCardEnd//法人身份证截止日期(截止)
          _this.ruleForm.business_info.sales_info.biz_store_info.biz_store_name=d.merchantName//线下门店名称
          _this.ruleForm.business_info.merchant_shortname=d.merchantShortName//商户简称
          _this.ruleForm.business_info.service_phone=d.servicePhone//客服电话
          _this.ruleForm.subject_info.business_license_info.merchant_name=d.licenseName//营业执照名称
          _this.ruleForm.subject_info.business_license_info.license_number=d.license//营业执照号
          _this.ruleForm.business_info.sales_info.biz_store_info.biz_store_address=d.saleAddress//经营地址
          _this.ruleForm.business_info.sales_info.biz_store_info.biz_address_area=[d.province,d.city,d.country]//门店所在地省市区
          _this.ruleForm.business_info.sales_info.biz_store_info.biz_address_code=d.area//门店省市编码
          _this.ruleForm.contact_info.contact_name=d.linkName//联系人姓名
          _this.ruleForm.contact_info.mobile_phone=d.phone//联系人手机号
          _this.ruleForm.contact_info.contact_id_number=d.superIdCard//联系人身份证号
          _this.ruleForm.contact_info.contact_email=d.email//联系人邮箱
          switch(d.accountType){//结算类型
              case "1"://对公
                  _this.ruleForm.bank_account_info.account_name=d.licenseName
                  _this.ruleForm.bank_account_info.bank_account_type="BANK_ACCOUNT_TYPE_CORPORATE"
                  break;
              case "2"://对法人
                  _this.ruleForm.bank_account_info.account_name=d.lawyer
                  _this.ruleForm.bank_account_info.bank_account_type="BANK_ACCOUNT_TYPE_PERSONAL"
                  break;
              case "3"://非法人
                  _this.ruleForm.bank_account_info.account_name=d.lawyer
                  _this.ruleForm.bank_account_info.bank_account_type="BANK_ACCOUNT_TYPE_PERSONAL"
                  break;
          }
          _this.ruleForm.settlement_info.activities_rate=d.transRuleType//商户费率
          _this.ruleForm.bank_account_info.account_number=d.accountNo//入账银行卡号
          _this.ruleForm.bank_account_info.account_bank=d.bankName//开户银行
          _this.ruleForm.bank_account_info.bank_branch_id=d.cnapsNo//支行行号
          _this.ruleForm.bank_account_info.bank_address_area=[d.accountProvince,d.accountCity,d.accountCountry];//开户银行省市区全部名称
          if(d.accountProvince&&d.accountCity&&d.accountCountry){
              _this.ruleForm.bank_account_info.bank_address_code=_this.areaList.find(t=>t.name==d.accountProvince).sub.find(t=>t.name==d.accountCity).sub.find(t=>t.name==d.accountCountry).code;//开户银行省市区编码
          }
          _this.ruleForm.bank_account_info.bank_name=d.subBranchName//开户支行
          _this.ruleForm.subject_info.identity_info.id_card_info.id_card_copy=d.type120//法人证件人像面照片
          _this.ruleForm.subject_info.identity_info.id_card_info.id_card_national=d.type130//法人证件国徽面照片
          _this.ruleForm.subject_info.business_license_info.license_copy=d.type70//营业执照
          _this.ruleForm.business_info.sales_info.biz_store_info.store_entrance_pic[0]=d.type10//门店门头照
          _this.ruleForm.business_info.sales_info.biz_store_info.indoor_pic[0]=d.type20//门店内部经营照
        });
    },
    submitForm(formName) {//表单验证
        let _this = this;
        this.$refs[formName].validate((valid,object) => {
            if(valid) {
                _this.getForm()
            }else{
                for (const i in object) {
                    let dom = this.$refs[i]
                    // 这里是针对遍历的情况（多个输入框），取值为数组
                    if (Object.prototype.toString.call(dom) !== '[object Object]') { 
                        dom = dom[0]
                    }
                        // 第一种方法（包含动画效果）
                        dom.$el.scrollIntoView({ // 滚动到指定节点
                        // 值有start,center,end，nearest，当前显示在视图区域中间
                        block: 'center', 
                        // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                        behavior: 'smooth' 
                    });
                    break // 跳出循环了
                }
            }
        });
    },
    getSelect(){//保存信息
        let data={};
        data.inputInfo=JSON.stringify(this.ruleForm);
        data.merchantId=this.posmerchantInfo.id
        data.channelId="301";
        merchantInput(data).then(d=>{
          this.$message({
              message: '保存成功',
              type: 'success'
          });
        });
    },
    getForm() {//提交表单
        let _this=this;
        let data=this.ruleForm;
        data.merchantId=this.posmerchantInfo.id
        data.channelId="301";
        data.channelName="微信刷脸";
        data.channelType="200"
        if(this.ruleForm.settlement_info.activities_id==""){
            data.scanRate="0.6"
        }else{
            data.scanRate=this.ruleForm.settlement_info.activities_rate+'';
        };
        this.formLoading=true
        merchantaddWxaddpart(data).then(d=>{
          this.$message({
              message: '添加成功',
              type: 'success'
          });
          setTimeout(function(){
              window.close();
          },2000);
        }).finally(d=>{
            _this.formLoading=false
        });
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type ==='image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        };
        return isJPG && isLt2M;
    },
    getAddImage(res) {//上传图片成功返回
        if(res.code==1){
            switch(res.data.field){
                case 'license_copy':
                    this.ruleForm.subject_info.business_license_info.license_copy=res.data.imageUrl;
                    break;
                case 'id_card_copy':
                    this.ruleForm.subject_info.identity_info.id_card_info.id_card_copy=res.data.imageUrl;
                    break;
                case 'id_card_national':
                    this.ruleForm.subject_info.identity_info.id_card_info.id_card_national=res.data.imageUrl;
                    break;
                case 'id_doc_copy':
                    this.ruleForm.subject_info.identity_info.id_card_info.id_doc_copy=res.data.imageUrl;
                    break;
                case 'store_entrance_pic':
                    this.ruleForm.business_info.sales_info.biz_store_info.store_entrance_pic=[res.data.imageUrl];
                    break;
                case 'indoor_pic':
                    this.ruleForm.business_info.sales_info.biz_store_info.indoor_pic=[res.data.imageUrl];
                    break;
                case 'mini_program_pics':
                    this.ruleForm.business_info.sales_info.mini_program_info.mini_program_pics=[res.data.imageUrl];
                    break;
            }
        }else{
            this.$message.error(res.msg);
        }
    },
    getSubBankList(e){//获取开户支行列表
        let _this=this;
        let data={};
        data.headBankName=this.ruleForm.bank_account_info.account_bank;
        data.size=50;
        data.bankName=e;
        subBankList(data).then(d=>{
            if(d.code==1){
                _this.subBankList=d.data;
            }
        });
    },
    getSubBranchName(e){//银行联行号
        this.ruleForm.bank_account_info.bank_branch_id=this.subBankList.find(t=>t.subBranchName==e).bankNo;
    },
  },
  watch:{
    'ruleForm.subject_info.business_license_info.legal_person':function(e){//经营者姓名监听
        this.ruleForm.subject_info.identity_info.id_card_info.id_card_name=e;//对应法人
        if(this.ruleForm.subject_info.subject_type=="SUBJECT_TYPE_INDIVIDUAL"&&this.ruleForm.bank_account_info.bank_account_type=="BANK_ACCOUNT_TYPE_PERSONAL"){
            this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.legal_person;
        }else{
            this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.merchant_name;
        }
    },
    'ruleForm.subject_info.business_license_info.merchant_name':function(e){//监听营业执照名称
        if(this.ruleForm.subject_info.subject_type=="SUBJECT_TYPE_ENTERPRISE"){
            this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.merchant_name;
        }else{
            this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.legal_person;
        }
    },
    'ruleForm.subject_info.subject_type':function(e){//主体类型监听
        let _this=this;
        switch(e){
            case 'SUBJECT_TYPE_ENTERPRISE'://企业
                this.ruleForm.settlement_info.settlement_id="716";
                this.ruleForm.settlement_info.qualification_type='零售批发/生活娱乐/网上商城/其他';
                this.ruleForm.bank_account_info.bank_account_type="BANK_ACCOUNT_TYPE_CORPORATE";
                this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.merchant_name;
                break;
            case 'SUBJECT_TYPE_INDIVIDUAL'://个体工商户
                this.ruleForm.settlement_info.settlement_id="719";
                this.ruleForm.settlement_info.qualification_type='零售批发/生活娱乐/其他';
                switch(this.ruleForm.bank_account_info.bank_account_type){
                    case 'BANK_ACCOUNT_TYPE_CORPORATE'://对公银行账户
                        _this.ruleForm.bank_account_info.account_name=_this.ruleForm.subject_info.business_license_info.merchant_name
                        break;
                    case 'BANK_ACCOUNT_TYPE_PERSONAL'://经营者个人银行卡
                        _this.ruleForm.bank_account_info.account_name=_this.ruleForm.subject_info.business_license_info.legal_person
                        break;
                }
                break;
        };
    },
    'ruleForm.subject_info.identity_info.id_card_info.card_period_type':function(e){//身份证长期
        if(e==1){
            this.ruleForm.subject_info.identity_info.id_card_info.card_period_end='长期';
        };
    },
    'ruleForm.subject_info.identity_info.id_doc_info.doc_period_type':function(e){//证件长期
        if(e==1){
            this.ruleForm.subject_info.identity_info.id_card_info.doc_period_end='长期';
        };
    },
    'ruleForm.business_info.sales_info.biz_store_info.biz_address_area':function(e){//门店省市编码
        if(e[0]&&e[1]&&e[2]){
            this.ruleForm.business_info.sales_info.biz_store_info.biz_address_code=this.areaList.find(t=>t.name==e[0]).sub.find(t=>t.name==e[1]).sub.find(t=>t.name==e[2]).code
        }
    },
    'ruleForm.bank_account_info.bank_address_area':function(e){//开户行省市编码
        if(e[0]&&e[1]&&e[2]){
            this.ruleForm.bank_account_info.bank_address_code=this.areaList.find(t=>t.name==e[0]).sub.find(t=>t.name==e[1]).sub.find(t=>t.name==e[2]).code;
        }
    },
    'ruleForm.bank_account_info.bank_account_type':function(e){//账户类型监听
        switch(e){
            case 'BANK_ACCOUNT_TYPE_CORPORATE'://对公银行账户
                this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.merchant_name;
                break;
            case 'BANK_ACCOUNT_TYPE_PERSONAL'://经营者个人银行卡
                this.ruleForm.bank_account_info.account_name=this.ruleForm.subject_info.business_license_info.legal_person;
                break;
        };
    },
  },
}
</script>
<style>
.el-image{ width: 80%; margin: 0 auto; display: block;}
.el-image img{ width: 80%; margin: 0 auto; }
.dialog-title{ width: 100%; text-align: center; line-height: 30px; font-size: 20px; }
.dialog-btn{ width: 80%; margin: 20px auto 0; display: block; }

.avatar-uploader .el-upload { border: 1px dashed #ffffff; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
.avatar-uploader .el-upload:hover { border-color: #409EFF; }
.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 170px; height: 112px; line-height: 112px; text-align: center; }
.avatar { width: 170px; height: 112px; display: block; }
.el-icon-plus img{ width: 170px; height: 112px; position: absolute; left: 0; top: 0;}
</style>

